.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}
.header {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f50000), to(#aa0000));
    display: flex;
    .px2rem(height,90);
    text-align: center;
    justify-content: center;
    align-items: center;
    .center {
        margin: 0 auto;
        color: white;
        .px2rem(font-size,40);
    }
}



.section {
    .tab {
        img {
            width: 100%;
        }
    }
    
    
    
    .title-color{
        .px2rem(height,50);
        .px2rem(line-height,50);
        .px2rem(padding-left,20);
        .px2rem(font-size,42);
//      background: linear-gradient(top, #d5d3d4,#a5a4a9);
        background: #bdbbbf;
        color: #595959;
    }
    
    
 
    
    
    .pinpai {
        .list {
            display: flex;
            justify-content: center;
            align-items: center;
            .px2rem(height,124);
            border-bottom: 1px solid gray;
            .logo {
                display: flex;
                img {
                    flex: 1;
                    width: 100%;
                }
            }
            .main {
                flex: 4;
                display: flex;
                flex-direction: column;
                .px2rem(font-size,20);
                .title {
                    flex: 1;
                    .px2rem(height,50);
                    .px2rem(line-height,50);
                    font-weight: bold;
                }
                .content {
                    flex: 1;
                    .px2rem(line-height,50);
                }
            }
            .discount {
                flex: 1;
                .px2rem(width,50);
                .px2rem(line-height,45);
                .px2rem(height,45);
                .px2rem(border-radius,5);
                text-align: center;
                color: white;
                text-align: center;
                .px2rem(font-size,20);
                .px2rem(margin-bottom,-25);
                background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f50000), to(#aa0000));
            }
            .right-arrow {
                flex: 1;
                text-align: center;
            }
        }
    }
    
    
    
    .more-brands{
        .px2rem(width,320);
        .px2rem(height,80);
        .px2rem(line-height,80);
        .px2rem(font-size,34);
        .px2rem(margin-top,18);
        .px2rem(margin-bottom,18);
        .px2rem(border-radius,5);
        .px2rem(border-radius,5);
        .px2rem(border-radius,5);
//      width: 320px;
//      height: 80px;
//      line-height: 80px;
//      background: linear-gradient(top,#f3f3f3,#a5a4a9);
        background: #bdbbbf;
        border: 1px solid gray;
        margin: 0 auto;
        text-align: center;
        font-size: 34px;
        border-radius: 5px;
        margin: 18px auto;
        box-shadow: 0 5px 3px #a5a4a9;
    }
    
    
    
    
    
    
}





.footer {
    position: fixed;
    width: 100%;
    .px2rem(bottom,0);
    .nav {
        margin: 0 auto;
        display: flex;
        background: black;
        li {
            flex: 1;
            display: flex;
            flex-direction: column;
            .px2rem(height,100);
            .px2rem(margin-top,5);
            .px2rem(margin-left,20);
            .px2rem(margin-right,20);
            .px2rem(margin-bottom,5);
            .px2rem(border-radius,5);
            align-items: center;
            .img {
                .px2rem(margin-top,5)
            }
            .title {
                text-align: center;
                color: white;
            }
            &.show {
                background: #6f6f6f;
            }
        }
    }
}